<template>
  <a-row class="j-select-biz-component-box" type="flex" justify="center" align="middle" :gutter="8">
    <a-button v-if="$attrs.entranceType === 'button'" :icon="$attrs.icon" @click="handleChoose" type="primary">{{ $attrs.text }}</a-button>
    <template v-else>
      <a-col class="left">    
        <a-select  
          mode="multiple"
          placeholder="请选择"
          v-model="selectValue"
          :options="selectOptions"
          allowClear
          :open="selectOpen"
          style="width: 100%;"
          @dropdownVisibleChange="handleDropdownVisibleChange"
          @click.native="visible = true"
          @change="changeSelectDataSource"
        />
      </a-col>
      <a-col class="right">
        <a-button type="primary" icon="search" @click="handleChoose">{{ $attrs.text || '选择' }}</a-button>
      </a-col>
    </template>
    <j-select-user-dept-component-modal
      :key="visibleNum"
      v-model="selectValue"
      :visible.sync="visible"
      :checkedOnlyUser="checkedOnlyUser"
      :orgCode="orgCode"
      @handleOptions="handleOptions"
      @changeSelectDataSource="changeSelectDataSource"
    />
  </a-row>
</template>

<script>
  import JSelectUserDeptComponentModal from './JSelectUserDeptComponentModal.vue'

  export default {
    name: 'JSelectUserDeptComponent',
    components: { JSelectUserDeptComponentModal },
    props: {
      value: {
        type: String,
        default: ''
      },
      checkedOnlyUser:{    //是否只允许选择用户
        type:Boolean,
        default:false
      },
      orgCode:{
        type: String,
      },
    },
    data() {
      return {
        selectValue: [],
        selectOptions: [],
        visible: false,
        selectOpen: false,
        visibleNum: 0
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          if (val) {
            this.selectValue = val.split(',')
          } else {
            this.selectValue = []
          }
        }
      },
    },
    methods: {
      handleDropdownVisibleChange() {  
        // 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
        //this.selectOpen = true
        this.$nextTick(() => {
          this.selectOpen = false
        })
      },
      handleChoose(){
        this.visible = true;
        this.visibleNum++;
      },
      handleOptions(options){
        this.selectOptions = options.map(item => {
          // 部门
          if(item.izDept === '1'){
            return {
              label: item.name,
              value: `D_${item.code}`
            }
          }
          // 联系人
          if(item.izDept === '0'){
            return {
              label: item.name,
              value: `U_${item.code}`
            }
          }
        })
      },
      changeSelectDataSource(selectDataSource){
        this.$emit('input', selectDataSource.join(','));
        this.$emit('change', selectDataSource.join(','));
      }
    }
  }
</script>

<style lang="less" scoped>
  .j-select-biz-component-box {
    @width: 82px;
    .left {
      width: calc(100% - @width - 8px);
    }
    .right {
      width: @width;
      line-height: initial;
    }
  }
</style>